Confirm?

Are you sure you want to proceed?
s
sardar

Modern Portfolio Website in Blazor

Clone & Customize via AI

A Tailwind Hero Section Blazor component presenting a profile-style landing hero with headline, bullet features and circular avatar. Uses Tailwind utility classes and a CSS entrance transition.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - HeroSection Razor component as a landing/hero block: headline, subtext and bullet feature list with SVG check icons. - Circular avatar image with border and shadow. - Entrance animation toggled after first render using a small delay to trigger CSS transitions. - Responsive two-column layout that collapses to a single column on small screens. - Tailwind dark: variant support for dark mode styling. ## Key components - HeroSection.razor and HomePage.razor - Razor markup: <img>, <ul>/<li>, inline SVG icons - C# code: OnAfterRenderAsync override, _hasAnimatedIn flag, AnimatedContainerClasses property, Services List<string> - Tailwind utilities: spacing, typography, responsive width (md:w-3/5, lg:w-1/2), rounded-full, border, shadow, dark: variants ## How it works - Services is an in-memory List<string> that the component enumerates into list items. - OnAfterRenderAsync checks firstRender, awaits a short Task.Delay(50), sets _hasAnimatedIn and calls StateHasChanged to re-render with transition classes. - AnimatedContainerClasses returns CSS utility fragments (opacity/translate) that the container uses for entrance animation. - The component is presentational (no @bind inputs or form validation) and relies on parent page routing (HomePage) for placement. ## Styling - Uses Tailwind CSS utility classes for layout, spacing and theme variants (dark:). - Responsive breakpoints (md, lg) control column widths and alignment. - Entrance animation depends on toggling opacity and translate utilities; transitions rely on existing CSS transition classes on the container. - Dark mode requires adding the 'dark' class to a parent (commonly <html>), which is noted in the HomePage comments. ## Reuse steps 1. Add Tailwind CSS to the Blazor project and enable dark mode strategy in tailwind.config.js. 2. Copy HeroSection.razor and HomePage.razor into Pages or Shared and register the HomePage route ("/"). 3. Replace the placeholder image src and adjust Services or bind it to a view model or API service for dynamic content. 4. Ensure _Imports.razor and layout include any needed namespaces and Tailwind's compiled CSS bundle. 5. Optionally implement a dark-mode toggle script to manage the 'dark' class on the <html> element. ## Limitations & next steps - This is a single presentational component generated by Instruct UI and does not include backend services, authentication, or image upload handling. - Accessibility improvements: provide descriptive alt text, keyboard focus styles and ARIA roles for list semantics. - Extend by wiring Services to an API, adding localization, extracting theme toggling into a service, and adding tests.